<template>
   <div ref="container" class="wrapper">
       <div class="content">

  
         <div class="hot">
        <div class="hot-title">
热门城市
        </div>
        <ul class="hot-list">
<li class="hot-item" v-for="item in hotcitys" :key="item.id"
@click="changecityname(item.cityName)"
>
    {{item.cityName}}
    
    </li>
       </ul>
     </div>



     <div class="sort">
        <div class="sort-title">
字母排序
        </div>
        <ul class="sort-list">
            <li class="sort-item" v-for="item in num" :key="item.id"
            @click="changesort(item.title)"
            >
                {{item.title}}
            </li>
             </ul>
        </div>


     <div class="numcity">

      <div class="numcity1" v-for="item in lettercitys" :key="item.id"
      :ref='item.title'
      >
            <div class="num-title">
           {{item.title}}

        </div>
       
            <ul class="num-item">
            <li class="num-li"   v-for="item1 in item.lists" @click="changecityname(item1)" :key="item1.id" >
                {{item1}}
            </li>
           
        </ul>
    </div>
    
   </div>



</div>


      
   </div>
</template>
<style scoped>

.sort{
    overflow: hidden;
}
.sort-title{
    font-size: .32rem;
    color: #212121;
    padding: .3rem;
}
.sort-list{
    background: #fff;
    font-size: .29rem;
    position: relative;
    background: #fff;
    
    color: #212121;



}

.sort-item{
    width:16.66%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    
  
    
}
.hot-title{
    font-size: .26rem;
    color: #212121;
    padding: .3rem;
}
.hot-list{
    background: #fff;
    font-size: .29rem;
    position: relative;
    overflow:hidden;
    color: #212121;



}
.hot-list::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 33.33%;
    left: 33.333%;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    
}
.hot-item{
    position: relative;

    width: 33.333%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    border-bottom: 1px solid #ddd;
  
    
}
.numcity{
   width: 100%;
   overflow: hidden;
  
   

}

.num-title{
    width: 100%;
    font-size: .36rem;
    padding: .2rem .3rem;
}
.num-item{
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #fff;


    
}
.num-item::before{
    content:"";
    width: 25%;
    height: 100%;
   position: absolute;
   left: 25%;
  pointer-events: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    
}
.num-item::after{
    content:"";
    width:0;
    height: 100%;
   position: absolute;
   left: 75%;
  
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    
}
.num-li{
    font-size: .36rem;
    float: left;
    width: 25%;
    
    text-align: center;
    padding: .3rem 0;
    border-bottom: 1px solid #ddd;

     white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   
   
}

.wrapper{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top:.88rem;
    overflow:auto;
    
    

}

</style>
<script>
import BetterScroll from 'better-scroll'
import {mapMutations} from 'vuex'

export default {
    props:['hotcitys','num','lettercitys'],
    data(){
        return{
            scroll:''

        }
    },mounted(){
        
 

    },
    updated(){
        
      
           let container=this.$refs['container'];
      this.scroll= new BetterScroll(container, {
  movable: true,
  zoom:true
})
 
    },
    methods:{
        changesort(sortname){
           this.scroll.scrollToElement(this.$refs[sortname][0])
        },
        changecityname(val){
         
            this.changecitys(val);
            this.$router.push('/')
        },
         ...mapMutations(['changecitys'])
    },computed:{
        

    }
   
}
</script>